<div class="wrapper">

    <div class="header header-view">
        <md-card class="m0 pl0">
            <div>
                <div class="mr pull-left">
                    <img src="assets/images/logo2.png"  class="logo"/>
                </div>
                <div class="pull-left">
                    <a ui-sref="dashboard" class="tc-white"></a>
                </div>

                <div class="pull-right">


                    <md-button class="md-warn" aria-label="menu"  ng-click="help()" ng-if="!isChrome">
                        <i class="mdi md-warn mdi-24px mdi-block-helper"></i>
                        Requirements Chrome or Chromium engine Browser!
                        <i class="mdi md-warn mdi-24px mdi-block-helper"></i>
                    </md-button>


                    <md-button aria-label="menu"  ng-click="help()">
                        <i class="mdi mdi-24px mdi-help"></i>
                        Requirements & help
                    </md-button>

                    <md-menu md-position-mode="target-right target">







                        <md-button aria-label="menu" ng-click="$mdOpenMenu($event)">
                            <i class="mdi mdi-24px mdi-theme-light-dark"></i>Ui Theme
                        </md-button>

                        <md-menu-content>
                            <md-menu-item ng-repeat="theme in vars.themes">
                                <md-button ng-click="setUiTheme(theme)">{{theme.title}}</md-button>
                            </md-menu-item>
                        </md-menu-content>


                    </md-menu>
                </div>
            </div>
        </md-card>
    </div>
    <div class="content">
        <div class="sidebar-view login">

            <md-card class="m0 h100" style="width: 200px">
                <div ng-repeat="base in vars.bases">
                    <md-button class="menu-button" ng-click="vars.db = base">
                        <span class="menu-button__title">
                            {{base.name}}
                        </span>
                        <span class="menu-button__subtitle">
                            {{base.host }}
                        </span>
                    </md-button>
                </div>

                <div flex class="pl">
                    <md-button class="md-raised md-primary m0 width-80" ng-click="add()">
                        Add new
                    </md-button>
                </div>

            </md-card>
        </div>


        <div class="main-content login">
            <div class="main-view">
                <div class="login-view">
                    <md-tabs md-dynamic-height md-border-bottom class="login-tabs">

                        <md-tab>
                            <md-tab-label>
                                Direct CH
                            </md-tab-label>
                            <md-tab-body>
                                <md-card md-theme="{{ showDarkTheme ? 'dark-grey' : 'default' }}" md-theme-watch>
                                    <form class="p++" name="loginForm">

                                        <div ng-if="!isChrome">
                                            <md-button class="md-warn" aria-label="menu"  ng-click="help()" >
                                                <i class="mdi md-warn mdi-24px mdi-block-helper"></i>
                                                Requirements Chrome or Chromium engine Browser!
                                                <i class="mdi md-warn mdi-24px mdi-block-helper"></i>
                                            </md-button>


                                        </div>
                                        <div>
                                            <md-input-container class="md-block" flex-gt-sm>
                                                <label>Name</label>
                                                <input ng-model="vars.db.name" required placeholder="dev" ng-disabled="vars.loading">
                                            </md-input-container>
                                        </div>
                                        <div>
                                            <md-input-container class="md-block" flex-gt-sm>
                                                <label>http://host:port</label>
                                                <input ng-model="vars.db.host" placeholder="http://127.0.0.1:8123" required ng-disabled="vars.loading">
                                            </md-input-container>
                                        </div>
                                        <div>
                                            <md-input-container class="md-block" flex-gt-sm>
                                                <label>Login</label>
                                                <input ng-model="vars.db.login" ng-disabled="vars.loading">
                                            </md-input-container>
                                        </div>
                                        <div>
                                            <md-input-container class="md-block" flex-gt-sm>
                                                <label>Password</label>
                                                <input type="password" ng-model="vars.db.password" ng-click="onKeypress($event)" ng-disabled="vars.loading">
                                            </md-input-container>
                                        </div>
                                        <div>
                                            <md-input-container class="md-block" flex-gt-sm>
                                                <label>Extend params query</label>
                                                <input ng-model="vars.db.params" placeholder="key1=value&key2=value" ng-disabled="vars.loading">
                                            </md-input-container>
                                        </div>
                                        <!--<div>-->

                                            <!--<md-checkbox md-no-ink ng-model="vars.db.NotCH1_1_54276" ng-disabled="vars.loading" class="md-block" flex-gt-sm aria-label="No Ink Effects">-->
                                                <!--Server Version < 1.1.54276-->
                                            <!--</md-checkbox>-->



                                        <!--</div>-->
                                        <!--<div layout="row">-->
                                                    <!--Experimental:&nbsp-->
                                                    <!--<md-checkbox md-no-ink ng-model="vars.db.baseauth" ng-disabled="vars.loading" class="md-block" flex-gt-sm aria-label="No Ink Effects">-->
                                                        <!--HTTP Base auth-->
                                                    <!--</md-checkbox>-->
                                                    <!--<md-checkbox md-no-ink ng-model="vars.db.includeCredentials" ng-disabled="vars.loading" class="md-block" flex-gt-sm aria-label="No Ink Effects">-->
                                                        <!--Include Credentials-->
                                                    <!--</md-checkbox>-->
                                        <!--</div>-->
                                        <div layout="row">
                                            <div flex>
                                                <md-button class="md-primary md-raised m0 width-100" ng-disabled="loginForm.$invalid || vars.loading" ng-click="login()">
                                                    Sign in
                                                </md-button>
                                            </div>
                                            <div flex ng-if="vars.db.id" class="pl">
                                                <md-button class="md-raised md-warn m0 width-100" ng-disabled="vars.loading" ng-click="remove()">
                                                    Delete
                                                </md-button>
                                            </div>
                                        </div>
                                        <div layout="row">
                                        </div>
                                    </form>
                                </md-card>
                            </md-tab-body>
                    </md-tab>



                    <md-tab>
                            <md-tab-label>
                                tabiX.server
                            </md-tab-label>

                            <md-tab-body>
                                <md-card md-theme="{{ showDarkTheme ? 'dark-grey' : 'default' }}" md-theme-watch>
                                    <form class="p++" name="loginServerForm">
                                        <div>
                                            <md-input-container class="md-block" flex-gt-sm>
                                                <label>Name</label>
                                                <input ng-model="vars.db.name" required placeholder="dev" ng-disabled="vars.loading">
                                            </md-input-container>
                                        </div>

                                        <div>
                                            <md-input-container class="md-block" flex-gt-sm>
                                                <label>URL</label>
                                                <input ng-model="vars.db.tabix.server" required placeholder="https://tabix.dev/s1" ng-disabled="vars.loading">
                                            </md-input-container>
                                        </div>
                                        <div>
                                            <md-input-container class="md-block" flex-gt-sm>
                                                <label>Config Key</label>
                                                <input ng-model="vars.db.tabix.confid" placeholder="empty" ng-disabled="vars.loading">
                                            </md-input-container>
                                        </div>
                                        <div>
                                            <md-input-container class="md-block" flex-gt-sm>
                                                <label>Login</label>
                                                <input ng-model="vars.db.tabix.login" ng-disabled="vars.loading">
                                            </md-input-container>
                                        </div>
                                        <div>
                                            <md-input-container class="md-block" flex-gt-sm>
                                                <label>Password</label>
                                                <input type="password" ng-model="vars.db.tabix.password" ng-click="onKeypress($event)" ng-disabled="vars.loading">
                                            </md-input-container>
                                        </div>
                                        <div layout="row">
                                            <div flex>
                                                <md-button class="md-primary md-raised m0 width-100" ng-disabled="vars.loading" ng-click="login()">
                                                    Sign in
                                                </md-button>
                                            </div>
                                            <div flex ng-if="vars.db.id" class="pl">
                                                <md-button class="md-raised md-warn m0 width-100" ng-disabled="vars.loading" ng-click="remove()">
                                                    Delete
                                                </md-button>
                                            </div>
                                        </div>
                                    </form>
                                </md-card>
                        </md-tab-body>
                    </md-tab>
                    </md-tabs>
                </div>
            </div>
            <div class="footer">
                <md-card class="m0 p">
                    <div>
                        <a href="https://github.com/tabixio/tabix" target="_blank" class="pull-right">
                            <i class="mdi mdi-github-circle mdi-24px"></i>
                        </a>
                        <p class="copyright text-center" style="line-height: 24px">
                            <a href="https://tabix.io/" target="_blank" class="tc-white" style="text-decoration: underline">Tabix.IO</a> by
                            Tabix LLC &copy; {{::vars.year}}, all rights reserved. Build <b>{{::vars.version}}</b>
                        </p>
                    </div>
                </md-card>
            </div>
        </div>
    </div>

</div>
